Native|Hybrid|WebApp选型及演进计划

目次

• App形状

  • Web App

  • Native App

  • Hybrid App

• Web App模子计划和运用 (待完成)

  • SPA (Single Page Application) 单页运用

  • PWA (Progressive Web App) 渐进加强Web运用

  • 模块化单页运用

• Hybrid App模子和完成道理

  • 现有的Hybrid形状

  • Hybrid的完成道理

  • Codova实践计划

  • React Native 实践计划

• Native App (待完成)

  • Native组件化&容器化

  • Native的粒度、切面和Business层的抽取

• App的选型计划和演进线路

  • 各种差别类型App选型计划

  • 晋级：ABTesting (待完成)

  • 晋级：用户事宜收集 &＃8211; 无埋点 vs 埋点计划 (待完成)

• EJU Router计划(待完成)

App形状

Web App

DEFINITION 定义

A web application or web app is any software that runs in a web browser. It is created in a browser-supported programming language (such as the combination of Javascript, HTML and CSS) and relies on a web browser to render the application.
Web applications are popular due to the ubiquity of web browsers, and the convenience of using a web browser as a client, sometimes called a thin client. The ability to update and maintain web applications without distributing and installing software on potentially thousands of client computers is a key reason for their popularity, as is the inherent support for cross-platform compatibility. Common web applications include webmail, online retail sales, online auctions, wikis and many other functions. &＃8211;wiki

在浏览器端构建的基于HTML/CSS/JS举行开辟，运用浏览器举行衬着的运用顺序。

其特性体如今几个方面

1. update and maintain web applications without distributing and installing software 晋级和保护不须要分发和装置

2. the inherent support for cross-platform compatibility 优越的跨平台性

STORY 小故事 浏览 视频

The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. They can make a call, they can send an email, they can look up a location on Google Maps. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. So developers, we think we’ve got a very sweet story for you. You can begin building your iPhone apps today. &＃8211;Steve Jobs

Jobs实际上是最早的web app的倡导者之一，在当时的设想中是没有native app这类情势的，一切的app都是以web的情势存在的，然则当时的Jobs须要面临3个题目

1. 挪动收集基础无力负担这类革新

2. 怎样使webapp让Apple红利

3. webapp运转的体验异常蹩脚

而基于此的议论和斟酌才逐步衍生出厥后的Native App和`App Store

Chromium OS vs Firefox OS

很有意义的一件事变是，许多年以后。有两家公司完成了Jobs昔时没有完成的妄想，离别推出了基于浏览器操作体系的PC和手机。

基于Chromium OS的Google Chrome Book 官网 视频

ChromeBook的推出，才逐步让市场上最先发生真正的Web App。至今我们能够看到的许多精彩产物，都是以此为末尾或许以此为契机，个中很有名的有：trello | slack

基于FireFox OS挪动端手机，不过很不幸2015年Q3最先，Mozilla宣告住手对Firefox OS的开辟，就如许多蒸蒸日上的手机体系一样，它还没怎样被熟悉，就与世长辞了。视频

CASE STUDY 案例

• Financial Times

• Trello

Native App

DIFINITION 定义

Apps are usually available through application distribution platforms, which began appearing in 2008 and are typically operated by the owner of the mobile operating system, such as the Apple App Store, Google Play, Windows Phone Store, and BlackBerry App World. Some apps are free, while others must be bought. Usually, they are downloaded from the platform to a target device, such as an iPhone, BlackBerry, Android phone or Windows Phone, but sometimes they can be downloaded to laptops or desktop computers. For apps with a price, generally a percentage, 20-30%, goes to the distribution provider (such as iTunes), and the rest goes to the producer of the app.[1] The same app can therefore cost the average Smartphone user a different price depending on whether they use iPhone, Android, or BlackBerry 10 devices. &＃8211;wiki

基于手机操作体系的运用顺序，运用其原生顺序举行构建

其特性体如今几个方面

1. operated by the owner of the mobile operating system 在对应操作体系平台举行运用顺序的开辟

2. available through application distribution platforms 须要分发运用(下载)的市场 — 卖钱

CASE STUDY 案例

• 微信

• 部落战役 在游戏中大批采纳OpenGL ES关于结果的开辟异常有协助，而WebGL的演进冗长

• 浏览：HTML5史上最沉重的失利：Facebook摒弃HTML5转投iOS Native

HYBRID APP

DEFINITION 定义

A hybrid mobile application (or hybrid mobile app) is a mobile application that runs inside of a native container and leverages the device’s web browser to display locally hosted HTML pages.[29] Hybrid mobile apps are composed mostly of HTML, Javascript, and CSS. Device specific functionalities such as camera access, geolocation, and accelerometer readings are exposed through a Javascript API. &＃8211;wiki

其特性体如今几个方面

• runs inside of a native container 运转在原生的容器内

• Device specific functionalities are exposed through a Javascript API 经由过程JS API暴露底层的功用接口

优缺点

Pros

• Hybrid mobile apps allow code reuse across platforms. Let the library or framework you are using take care of the platform specific differences and use the same Javascript code on both platforms. 跨平台的代码复用 &＃8211; 在差别的平台运用雷同的Javascript代码

• Javascript is something that many developers are already familiar with where something like the iOS development tools are more specialized. It can be argued that there is less of a learning curve when developing hybrid mobile apps compared to native apps. Javascript运用的通用性处置惩罚了iOS开辟者的专用属性，开辟hybrid mobile的学习曲线更简朴。

• The app&＃8217;s interface and logic can be built and debugged in the web browser using an emulation framework. This could lower development costs depending on the tools required to develop native apps for the target platforms. app的ui和逻辑都能够在浏览器中构建和debug，削减在目的平台上的消费。

• The HTML5 application development with CSS3 gives the compelling structure to the interface of game app and this ensures pleasing user-interface. 运用CSS3让用户界面和游戏开辟越发活泼。

Cons

• Hybrid mobile apps are more susceptible to user interface lag due to the extra layers of abstraction.[29]
  Only a certain subset of native functionality is available which depends on the framework. All others native functions are accessible developing Plugins. 大部份native层的功用都须要经由过程plugin的体式格局举行挪用。

• As for native apps, the hybrid code base requires recompilation and resubmission to the distribution network where it is possible to instantly update a mobile web app’s codebase. 相关于web app来讲，hybird需用从新编译和分发才完成更新

• HTML5 in mobile devices H5在Web容器里的兼容性题目

CASE STUDY 案例

• 街旁国内最早的Hybrid形式的倡导者

• 运用HTML5搭建街旁新版混合式iOS客户端

挑选

WEB APP, HYBRID APP & NATIVE APP 挑选哪一种形状？

1. View的衬着依赖于浏览器本身的衬着引擎，纵然游戏也不须要去写openGL

2. Bridge在差别的平台经由过程差别的native层完成，在各自平台下完成编译

3. Business能够完成在Web也能够完成在Native

4. Plugin构成了Bridge的扩大

现有平台

• Cordova

• Ionic

• Phonegap

• sencha

• apicloud

• appcan

案例

• ionic weather

运用JS编写通用的营业逻辑，运用Nodejs编译差别平台的Native app 视频

• Appcelerator Titanium Tutorial &＃8211; Hello World With Titanium

1. View经由过程Ti.UI举行挪用Native完成，在差别的操作体系中挪用差别的Native UI完成。Ti.UI能够定义部份Native UI

2. Business经由过程JS编写末了编译成Native代码

3. Bridge和Build东西举行了整合，理论上能够跨一切平台

• Creating a basic layout in Titanium

现有平台

• Titanium

• 在我写这篇文章第一稿的时刻，Facebook宣布了React Native，从Coding的头脑上RN不一样

案例

• Sample.Todo

Hybrid App完成道理

Titanium严格来讲不属于Hybrid，由于其终究发生的仍然是Native App，过于牛B，不在本文学问范围内。本文限于议论相似Cordova的Hybrid完成。

Native挪用JS

1. native经由过程string挪用js

2. webview挪用js诠释器的eval要领将string转化为js要领

3. webview挪用js要领

JS挪用Native

1. Javascript转变url，经由过程url通报挪用的要领和参数

2. webview监听到了URL变化，而且探测到url中定义的要领和参数

3. 寻觅对应的映射表，找到native对应接口api举行挪用

4. 实行Javascript挪用要领时传入的回调string并增加数据

5. webview剖析string转化为Javascript举行挪用

URL Schemes

为了区分平常的http接见的url与hybrid挪用native的url，参考openurl的规范apple提出了url schema的要领

• About Apple URL Schemes

体系自定义了能够被辨认的协媾和url，比方

• mailto:frank@wwdcdemo.example.com

• tel:1-408-555-5555

• sms:1-408-555-1212

app本身能够自定义url schema，而且把自定义的url注册在调理中心， 比方

• ctrip://wireless 翻开携程App

• weixin:// 翻开微信

浏览

• URL Scheme 统计

早期的Android采纳了JavascriptInterface，然则这类计划存在注入的安全隐患，所以在Android 4.0以上的版本最先就支撑了URL Schema计划。

浏览

浏览

Hybrid URL Schema在完成中的题目

1. 存在短时候内高并发的题目，比方：一次定位没有完成时期，重复挪用定位

2. 实行http的url接见还没有返回就挪用了新url schema，致使了前一次行动没有见效

3. 在ios中native挪用js是及时的，在Android中native挪用js是异步的，在异步挪用中涌现alert这类壅塞历程的会直接crash app

关于这里的实践，须要读Cordova的JS Bridge

Cordova实践计划

Cordova诞生于PhoneGap，夙兴的PhoneGap是一个开源平台，一切的代码、编译都能够运用PhoneGap平台完成。在被Adobe收买Nitobi，同时把PhoneGap个中的核心层代码举行了开源，新版本后的PhoneGap进入贸易化。所以如今在PhoneGap平台上假如是用它的编译，须要付费。

但有了Cordova，我们就能够造一个新的PhoneGap～～不是吗，所以有了Ionic

Cordova架构：

就如我们前面说的，Cordova的计划就是放一个WebView一切的UI都是经由过程WebView举行显现，经由过程JS Bridge调取Native要领。Cordova将JS Bridge做成了一种插件式的体式格局，便于扩大。

一切采纳Cordova计划或许相似以WebView作为显现的Hybrid计划，在Android上碰到一个最大的题目，就是差别ROM中WebView的兼容性题目

之前华为体系的webview内核有题目，只需有js交互，占用内存无穷上升；某次测试到达恐惧的380M，几乎吓尿；由因而webkit内核题目，无计可施；我们只能检测到是华为体系的这个特定版本的时刻谈个Toast，通知用户不要在页面停留太长时候。。（如今这个bug已修复了，当时体系版本：NXT-TL00C 01B1 29SP02）— 知乎用户

怎样办？！ Crosswalk。这段视频须要看一下视频

下一个题目：假如用Crosswalk包太大怎样破？用Crosswalk Lite或许只用Arm的包

React Native 实践计划

最早我们在做丰趣海淘的时刻，我们大批的人力和时候都投入在PC站点、挪动站点和背景的搭建中，我们还在尝试其他的贸易模子，所以没有人力投入在App的开辟中。有一天下昼，我和我们大前端的负责人议论了一下以后，决议出一个App，放App Store和Google Play，然后也许2天摆布时候，我把当时做的挪动端站点扔进去，宣布了当时我们第一个版本～～

上线以后，发现了一个让人欣喜的数据：周复购xx%～～当时老板大手一挥，做挪动端。到本日，xx%以上的购置都从挪动端来，用时一年半。

所以我们当时早期的架构就是地道的Web，然后我们就最先了演进。这个要说到我们当时的前端架构，我们用了CanJS，然则没有做地道的单页运用。我们做了模块化的单页运用，简朴的说，首页我以为它是一个模块，我为他零丁做一个单页运用。一切单页运用有个切面层，做服务端的署名、csrftoken的处置惩罚等等。

然后我们最先做原生化，为何要做原生化，由于要让用户体验有大的供应、由于要做用户心智

所以基于一个个模块，最先做，我们原则是：

• 下单主流程原生化，让用户最快速率的付钱

• 产物化比较好的模块先原生化

• 常常变化而且变化异常大的模块，不做原生化 &＃8211; 用hybrid的计划走

Hybrid最最先我们采纳了Cordova的架构，然则厥后摒弃了，Cordova太重了，没必要，我们本身写了JS Bridge经由过程URL Scheme的体式格局举行挪用，封装了挪用客栈，同时引入了Crosswalk处置惩罚华为机的兼容性题目。

所以我们总结一些平常的演进流程：

根据差别的App分类，做个简朴的发起

• 电商类：70% Native + 10% Web + 20% Hybrid

• 东西类：80% Native + 20% Hybrid

• 交际类：50% Native + 20% Web + 30% Hybrid

• 游戏类：95% Native + 5% Web

EJU Router计划

router-android

router-iOS